<template>
  <div class="padding-y-15 padding-x-30">
    <a-form
      :label-col="{ md: { span: 2 }, sm: { span: 4 }, xs: { span: 24 } }"
      :wrapper-col="{ md: { span: 22 }, sm: { span: 20 }, xs: { span: 24 } }"
    >
      <a-row :gutter="24">
        <a-col
          :md="6"
          :sm="12"
          :xs="10"
          style="
            height: calc(100vh - 120px);
            overflow-y: auto;
            background-color: #fff;
            padding-left: 0;
            padding-right: 0;
          "
        >
          <div class="flex align-center justify-between padding-15">
            <span class="fs-16">退货单列表</span>
            <div class="flex align-center hands" @click="showsearch=true">
              <file-search-outlined />
              <span class="fs-14">查询</span>
            </div>
          </div>
          <div class="flex align-center">
            <a-input-search
              class="flex1 fs-12 margin-x-10"
              placeholder="会员手机（支持后4为）"
              v-model:value="form.mobile"
              @search="showMember = true"
            />
          </div>
          <div class="margin-top-15">
            <div
              class="margin-bottom-6 kd-solid padding-10"
              :class="[current == index ? 'bg-f5f5f5' : '']"
              v-for="(item, index) in list"
              :key="index"
              @click="getDetail(item, index)"
            >
              <div class="flex justify-between">
                <div class="fs-12 ele-text-primary">{{
                  item.refund_sn || ''
                }}</div>
                <img
                  src="@/assets/rmb.png"
                  style="width: 20px; height: 20px"
                  v-if="item.status == 2"
                />
                <img
                  src="@/assets/yiwancheng.png"
                  style="width: 20px; height: 20px"
                  v-if="item.status == 3"
                />
                <img
                  src="@/assets/yituikuan.png"
                  style="width: 20px; height: 20px"
                  v-if="item.status == 4"
                />
              </div>
              <div class="fs-12 margin-y-6"
                >会员手机：{{ item.mobile || '' }}</div
              >
              <div class="fs-12">实退金额：¥{{ item.amount2 || '' }}</div>
            </div>
          </div>
        </a-col>
        <a-col
          :md="18"
          :sm="12"
          :xs="14"
          style="padding-left: 0; padding-right: 0"
        >
          <div
            style="
              height: calc(100vh - 120px);
              background-color: #fff;
              border-left: 10px solid #f5f5f5;
              overflow-y: auto;
            "
          >
            <div
              class="flex align-center justify-center padding-15"
              style="border-bottom: 10px solid #f5f5f5"
            >
              <span class="fs-16">退货单据</span>
            </div>
            <div class="padding-15">
              <div class="flex align-center justify-between margin-bottom-15">
                <span class="fs-14">基本信息</span>
              </div>
              <table cellpadding="0" cellspacing="0" class="recepit_table2">
                <tbody>
                  <tr>
                    <td class="tit">退货单号</td>
                    <td>{{ info.refund_sn || '' }}</td>
                    <td class="tit">创建时间</td>
                    <td>{{ info.create_time || '' }}</td>
                    <td class="tit">来源</td>
                    <td>{{ info.store_name || '' }}</td>
                  </tr>
                  <tr>
                    <td class="tit">原售价</td>
                    <td>{{ info.real_amount || '' }}</td>
                    <td class="tit">数量</td>
                    <td>{{ info.num || '' }}</td>
                    <td class="tit">收款金额</td>
                    <td>{{ info.pay_amount || '' }}</td>
                  </tr>
                  <tr>
                    <td class="tit">应退金额</td>
                    <td>{{ info.amount || '' }}</td>
                    <td class="tit">折旧金额</td>
                    <td>{{ info.dep_charge || '' }} </td>
                    <td class="tit">实退金额</td>
                    <td>{{ info.refund_amount || '' }}</td>
                  </tr>
                  <tr>
                    <td class="tit">退款方式</td>
                    <td>{{ info.refund_pay_name || '' }}</td>
                    <td class="tit">扣减积分</td>
                    <td>{{ info.points || '' }} </td>
                    <td class="tit">扣减礼金</td>
                    <td>{{ info.cash || '' }}</td>
                  </tr>
                  <tr>
                    <td class="tit">原销售单</td>
                    <td>{{ info.order_sn || '' }}</td>
                    <td class="tit">销售时间</td>
                    <td>{{ info.sales_time || '' }} </td>
                    <td class="tit">收银员</td>
                    <td>{{ info.make_user_name || '' }}</td>
                  </tr>
                  <tr>
                    <td class="tit">支付方式</td>
                    <td></td>
                    <td class="tit">消费动机</td>
                    <td>{{ info.motive_name || '' }} </td>
                    <td class="tit">客户来源</td>
                    <td>{{ info.from_name || '' }}</td>
                  </tr>
                  <tr>
                    <td class="tit">主销导购</td>
                    <td>{{ info.main_salesman_name || '' }}</td>
                    <td class="tit">辅销导购</td>
                    <td>{{ info.make_user_name || '' }} </td>
                    <td class="tit">销售班组</td>
                    <td>{{ info.salesman_team_name || '' }}</td>
                  </tr>
                  <tr>
					  <td class="tit">会员昵称</td>
					  <td>{{ info.nickname || '' }}</td>
					  <td class="tit">会员手机</td>
					  <td>{{ info.mobile || '' }} </td>
					  <td class="tit">备注</td>
					  <td>{{ info.note || '' }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="padding-15">
              <div class="flex align-center justify-between margin-bottom-15">
                <span class="fs-14">首饰销售</span>
              </div>
              <div class="kd-solid margin-top-15">
                <div class="flex">
                  <!-- 左侧-->
                  <div class="flex1">
                    <div class="flex align-center">
                      <div class="kd_left">图片</div>
                      <div class="kd_right flex align-center">
                        <a-image :width="30" :height="30" :src="info2.thumb_url" />
                      </div>
                    </div>
                    <div class="flex align-center">
                      <div class="kd_left">条码</div>
                      <div class="kd_right">{{ info2.bar_code || '' }}</div>
                    </div>
                    <div class="flex align-center">
                      <div class="kd_left">小类</div>
                      <div class="kd_right">{{ info2.subclass_code_name || '' }}</div>
                    </div>
                    <div class="flex align-center">
                      <div class="kd_left">品类</div>
                      <div class="kd_right">{{ info2.classes_code_name || '' }}</div>
                    </div>
                    <div class="flex align-center">
                      <div class="kd_left">成色</div>
                      <div class="kd_right">{{ info2.quality_code_name || '' }}</div>
                    </div>
                    <div class="flex align-center">
                      <div class="kd_left">货品名称</div>
                      <div class="kd_right">{{ info2.name || '' }}</div>
                    </div>
                    <div class="flex align-center">
                      <div class="kd_left">数量</div>
                      <div class="kd_right">{{ info2.num || '' }}</div>
                    </div>
                    <div class="flex align-center">
                      <div class="kd_left">货重</div>
                      <div class="kd_right">{{ info2.num || '' }}</div>
                    </div>
                    <div class="flex align-center">
                      <div class="kd_left">净金重</div>
                      <div class="kd_right">{{ info2.gold_weight || '' }}</div>
                    </div>
                    <div class="flex align-center">
                      <div class="kd_left">销售金价</div>
                      <div class="kd_right">{{ info2.sales_gold_price || '' }}元/g</div>
                    </div>
                    <div class="flex align-center">
                      <div class="kd_left">销售工费</div>
                      <div class="kd_right">{{ info2.sales_labor || '' }}</div>
                      <span class="kd_right_text"
                        >元/
                        <template v-if="info2?.detail?.labor_type == 1">g</template>
                        <template v-if="info2?.detail?.labor_type == 2">件</template>
                      </span>
                    </div>
                    <div class="flex align-center">
                      <div class="kd_left">销售标记</div>
                      <div class="kd_right">{{ info2.sales || '' }}</div>
                    </div>
                    <div class="flex align-center">
                      <div class="kd_left">赠送积分</div>
                      <div class="kd_right">{{ info.points || '' }}</div>
                    </div>
                  </div>
                  <!-- 右侧 -->
                  <div class="flex1">
                    <div class="flex align-center">
                      <div class="kd_left">标签价</div>
                      <div class="kd_right flex1">{{ info2.sticker_price || '' }}</div>
                    </div>
                    <div class="flex align-center">
                      <div class="kd_left">原售价</div>
                      <div class="kd_right flex1">{{ info2.original_amount || '' }}</div>
                    </div>
                    <div class="flex align-center">
                      <div class="kd_left">实售价</div>
                      <div class="kd_right flex1">{{ info2.real_amount || '' }}</div>
                    </div>
                    <div class="flex align-center">
                      <div class="kd_left">固定折扣</div>
                      <div class="kd_right">{{ info2.regular_discount || '' }}</div>
                      <span class="kd_right_text">%</span>
                    </div>
                    <div class="flex align-center">
                      <div class="kd_left">卡券编号</div>
                      <div class="kd_right flex1">{{ info2.coupon_id || '' }}</div>
                    </div>
                    <div class="flex align-center">
                      <div class="kd_left">卡券详情</div>
                      <div class="kd_right flex1">{{ info2.coupon_id || '' }}</div>
                    </div>
                    <div class="flex align-center">
                      <div class="kd_left">积分抵扣</div>
                      <div class="kd_right">{{ info2.points_deduction || '' }}</div>
                      <span class="kd_right_text">元</span>
                    </div>
                    <div class="flex align-center">
                      <div class="kd_left">抹零</div>
                      <div class="kd_right">{{ info2.small_change || '' }}</div>
                      <span class="kd_right_text">元</span>
                    </div>
                    <div class="flex align-center">
                      <div class="kd_left">实售折扣</div>
                      <div class="kd_right flex1">{{ info2.real_discount || 0 }}%</div>
                    </div>
                    <div class="flex align-center">
                      <div class="kd_left">积分扣减</div>
                      <div class="kd_right flex1">{{ info2.points || 0 }}%</div>
                    </div>
                    <div class="flex align-center">
                      <div class="kd_left">单件备注</div>
                      <div class="kd_right flex1">{{ info2.note || '' }}</div>
                    </div>
                    <div class="flex align-center">
                      <div class="kd_left">赠送礼金</div>
                      <div class="kd_right flex1">{{ info2.cash || '' }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </a-form>

    <!-- 选择会员弹窗 -->
    <select-member
      v-if="showMember"
      v-model:visible="showMember"
	  :memberVal="form.mobile"
      @getMember="getMember"
    />
    <!-- 查询弹窗 -->
    <search
      v-if="showsearch"
      v-model:visible="showsearch"
      @doSearch="doSearch"
    />
  </div>
</template>

<script setup>
  import { ref, reactive, onMounted } from 'vue';
  import {
    PlusOutlined,
    UploadOutlined,
    ClearOutlined,
    FileSearchOutlined
  } from '@ant-design/icons-vue';
  import { message, Modal } from 'ant-design-vue';
  import { actionFn } from '@/utils/action.js';
  import { daochuFn } from '@/utils/daochu.js';
  import { useRouter } from 'vue-router';
  import selectMember from '../../order/jewelry_order/components/select-member.vue';
  import search from './components/search.vue';
  import {get_refund_list,get_refund_detail} from '@/api/order/order/refund';

  const { push } = useRouter();
  const list = ref([]);
  const info = ref({});
  const info2 = ref({});
  const current = ref(-1);
  const showMember = ref(false);
  const showsearch = ref(false);
  const form = reactive({
    order_sn: '',
    refund_sn: '',
    refund_start_time: '',
    refund_end_time: '',
    name: '',
    mobile: '',
    bar_code: ''
  });

  onMounted(() => {
		searchMember();
	});

  const getMember = (val) => {
    console.log('val==', val);
    form.mobile = val.mobile;
    showMember.value = false;
    searchMember();
  };

  const searchMember = () => {
    get_refund_list(form).then((res) => {
      list.value = res;
	  list.value.forEach(item=>{
		   item.amount2 = Math.abs(Number(item.amount));
	  })
      if (res.length > 0) {
        getDetail(list.value[0], 0);
      }
    });
  };
  const getDetail = (item, index) => {
    get_refund_detail({
      refund_sn: item.refund_sn
    }).then((res) => {
      current.value = index;
      info.value = res;
      info2.value = res.item;
	  console.log('---===', info2.value)
    });
  };
  
  const doSearch = (val)=>{
	  get_refund_list(val).then((res) => {
		  showsearch.value = false;
	    list.value = res;
		list.value.forEach(item=>{
			item.amount2 = Math.abs(Number(item.amount));
		})
	    if (res.length > 0) {
	      getDetail(list.value[0], 0);
	    }
	  });
  }
</script>
